import React, { useEffect } from 'react';
import { Modal, Form, Input } from 'antd';
import { useForm } from 'antd/es/form/util';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};


const EditModal: React.FC<any> = (props: any) => {
  const { visible, onEdit, onCancel, type, currentItem, ...modalProps } = props;

  const [form] = useForm()

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({ ...currentItem });
    }
  }, [visible])

  const onOk = () => {
    form.validateFields().then((values: any) => {
      onEdit(values)
    })
  }

  return (
    <Modal
      visible={visible}
      title={type === 'add' ? '新增' : '编辑'}
      onOk={onOk}
      onCancel={onCancel}
      maskClosable={false}
      {...modalProps}
      initialValue={{ type: 'add' }}
    >
      <Form
        {...layout}
        name="basic"
        form={form}
      >
        <Form.Item
          label="姓名"
          name="name"
          rules={[{ required: true, message: '' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="年龄"
          name="age"
          rules={[{ required: true, message: '' }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item
          label="身高"
          name="height"
          rules={[{ required: true, message: '' }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item
          label="体重"
          name="weight"
          rules={[{ required: true, message: '' }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item
          label="现居地"
          name="city"
          rules={[{ required: true, message: 'ti' }]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default EditModal;